<template>
    <div class="title" :style="data.bgGray ? 'background-color: #F7F7F7' : ''">
        <div class="contain">
            <img :src="require('@/assets/imgs/' + data.urlImg)" alt="">
            <div class="chn"><img class="icon" :src="require('@/assets/imgs/' + data.urlIcon)" alt="">{{ data.title }}</div>
        </div>
    </div>
</template>
<script>
export default {
    props: ['data'],
    data() {
        return {
        }
    }
}
</script>
<style lang="less" scoped>
    .title{
        width: 7.5rem;
        height: 0.95rem;
        position: relative;
        display: flex;
        background-color: #fff;
        .contain{
            margin: 0.2rem auto;
            img{
                height: 0.56rem;
            }
            .chn{
                color: #3995C0;
                font-size: 0.36rem;
                font-weight: bold;
                text-align: center;
                margin-top: -0.39rem;
                .icon{
                    width: 0.3rem;
                    height: 0.3rem;
                    margin-right: 0.07rem;
                }
            }

        }
        
        // img{
        //     height: 0.56rem;
        //     margin: 0.2rem auto;

        // }
    }
</style>